<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Propeller is a front-end responsive framework based on Material design & Bootstrap.">
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
<title>Propeller Admin - Develop more, Code less.</title>
<link rel="shortcut icon" type="image/x-icon" href="themes/images/favicon.ico">

<!-- Google icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="../../assets/css/bootstrap.min.css">
<!-- Propeller css -->
<link rel="stylesheet" type="text/css" href="../../assets/css/propeller.min.css">

<!-- Propeller theme css-->
<link rel="stylesheet" type="text/css" href="themes/css/propeller-theme.css" />

<!-- Propeller admin theme css-->
<link rel="stylesheet" type="text/css" href="themes/css/propeller-admin.css">

    <!--Google Analytics code-->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-124615-22', 'auto');
      ga('send', 'pageview');
    </script>
</head>

<!-- Styles Ends -->
</head>

<body>
<!-- Header Starts -->
<!--Start Nav bar -->
<nav class="navbar navbar-inverse navbar-fixed-top pmd-navbar pmd-z-depth">

	<div class="container-fluid">
		<div class="pmd-navbar-right-icon pull-right navigation">

			
			<!-- Notifications -->
            <div class="dropdown notification icons pmd-dropdown">
			
				<a href="javascript:void(0)" title="Notification" class="dropdown-toggle pmd-ripple-effect"  data-toggle="dropdown" role="button" aria-expanded="true">
					<div data-badge="3" class="material-icons md-light pmd-sm pmd-badge  pmd-badge-overlap">notifications_none</div>
				</a>
			
				<div class="dropdown-menu dropdown-menu-right pmd-card pmd-card-default pmd-z-depth" role="menu">
					<!-- Card header -->
					<div class="pmd-card-title">
						<div class="media-body media-middle">
							<a href="notifications.html" class="pull-right">3 new notifications</a>
							<h3 class="pmd-card-title-text">Notifications</h3>
						</div>
					</div>
					
					<!-- Notifications list -->
					<ul class="list-group pmd-list-avatar pmd-card-list">
						<li class="list-group-item hidden">
							<p class="notification-blank">
								<span class="dic dic-notifications-none"></span> 
								<span>You don´t have any notifications</span>
							</p>
						</li>
						<li class="list-group-item unread">
							<a href="javascript:void(0)">
								<div class="media-left">
									<span class="avatar-list-img40x40">
										<img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="themes/images/profile-1.png" data-holder-rendered="true">
									</span>
								</div>
								<div class="media-body">
									<span class="list-group-item-heading"><span>Prathit</span> posted a new challanegs</span>
									<span class="list-group-item-text">5 Minutes ago</span>
								</div>
							</a>
						</li>
						<li class="list-group-item">
							<a href="javascript:void(0)">
								<div class="media-left">
									<span class="avatar-list-img40x40">
										<img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="themes/images/profile-2.png" data-holder-rendered="true">
									</span>
								</div>
								<div class="media-body">
									<span class="list-group-item-heading"><span>Keel</span> Cloned 2 challenges.</span>
									<span class="list-group-item-text">15 Minutes ago</span>
								</div>
							</a>
						</li>
						<li class="list-group-item unread">
							<a href="javascript:void(0)">
								<div class="media-left">
									<span class="avatar-list-img40x40">
										<img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="themes/images/profile-3.png" data-holder-rendered="true">
									</span>
								</div>
								<div class="media-body">
									<span class="list-group-item-heading"><span>John</span> posted new collection.</span>
									<span class="list-group-item-text">25 Minutes ago</span>
								</div>
							</a>
						</li>
						<li class="list-group-item unread">
							<a href="javascript:void(0)">
								<div class="media-left">
									<span class="avatar-list-img40x40">
										<img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="themes/images/profile-4.png" data-holder-rendered="true">
									</span>
								</div>
								<div class="media-body">
									<span class="list-group-item-heading"><span>Valerii</span> Shared 5 collection.</span>
									<span class="list-group-item-text">30 Minutes ago</span>
								</div>
							</a>
						</li>
					</ul><!-- End notifications list -->

				</div>
				
				
            </div> <!-- End notifications -->
		</div>
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<a href="javascript:void(0);" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect pull-left margin-r8 pmd-sidebar-toggle"><i class="material-icons">menu</i></a>	
		  <a href="index.html" class="navbar-brand">
		  	<svg version="1.1" x="0px" y="0px"
	 width="174.16px" height="48px" viewBox="0 0 174.16 48" enable-background="new 0 0 174.16 48" xml:space="preserve">
<g>
	<g>
		<path fill="#FFFFFF" d="M8.658,17.795c5.339,0,8.403,2.64,8.403,7.251c0,4.792-3.064,7.585-8.403,7.585H3.773v6.4h-3.58V17.795
			H8.658z M3.773,29.415h4.733c3.276,0,5.127-1.395,5.127-4.278c0-2.792-1.851-4.125-5.127-4.125H3.773V29.415z"/>
		<path fill="#FFFFFF" d="M29.167,32.601c-0.304,0.031-0.637,0.031-0.971,0.031H23.16v6.4h-3.58V17.795h8.616
			c5.431,0,8.556,2.64,8.556,7.251c0,3.398-1.578,5.794-4.399,6.886l4.763,7.1H33.05L29.167,32.601z M28.196,29.415
			c3.276,0,5.158-1.395,5.158-4.278c0-2.792-1.881-4.125-5.158-4.125H23.16v8.403H28.196z"/>
		<path fill="#FFFFFF" d="M77.622,17.795c5.339,0,8.403,2.64,8.403,7.251c0,4.792-3.064,7.585-8.403,7.585h-4.884v6.4h-3.58V17.795
			H77.622z M72.738,29.415h4.732c3.277,0,5.127-1.395,5.127-4.278c0-2.792-1.85-4.125-5.127-4.125h-4.732V29.415z"/>
		<path fill="#FFFFFF" d="M92.124,21.012v5.733h10.375v3.217H92.124v5.854h11.953v3.217H88.544V17.795h15.169v3.216H92.124z"/>
		<path fill="#FFFFFF" d="M120.188,35.786v3.246h-12.772V17.795h3.58v17.991H120.188z"/>
		<path fill="#FFFFFF" d="M135.356,35.786v3.246h-12.771V17.795h3.579v17.991H135.356z"/>
		<path fill="#FFFFFF" d="M141.333,21.012v5.733h10.376v3.217h-10.376v5.854h11.953v3.217h-15.533V17.795h15.17v3.216H141.333z"/>
		<path fill="#FFFFFF" d="M166.212,32.601c-0.304,0.031-0.638,0.031-0.971,0.031h-5.037v6.4h-3.578V17.795h8.615
			c5.43,0,8.555,2.64,8.555,7.251c0,3.398-1.577,5.794-4.399,6.886l4.764,7.1h-4.065L166.212,32.601z M165.241,29.415
			c3.275,0,5.156-1.395,5.156-4.278c0-2.792-1.881-4.125-5.156-4.125h-5.037v8.403H165.241z"/>
	</g>
	<path opacity="0.2" fill="#000001" d="M62.295,26.706c-0.529,4.162-1.91,7.709-3.951,10.195c-2.008,2.443-4.649,3.869-7.749,3.867
		c-3.078,0-5.549-1.311-7.413-3.635c-1.923-2.4-3.186-5.887-3.784-10.129l0.16-0.766l-0.035-0.928l5.57-1.038l5.709-0.359
		l4.412,0.115l6.468,1.056l0.701-0.109L62.295,26.706z"/>
	<path fill="#FDC672" d="M63.149,25.023c-0.557,4.405-2.009,8.157-4.156,10.788c-2.112,2.586-4.891,4.094-8.152,4.094
		c-3.237,0-5.836-1.387-7.797-3.846c-2.103-2.641-4.178-8.793-3.799-12.148c2.721-1.023,7.072-1.686,11.976-1.686
		c4.909,0,9.264,0.665,11.985,1.689L63.149,25.023z"/>
	<path opacity="0.2" fill="#2A100A" d="M61.876,31.167c-0.708,1.84-1.62,3.455-2.708,4.789c-1.093,1.338-2.363,2.391-3.785,3.105
		c-1.374,0.689-2.889,1.063-4.523,1.061c-1.624,0-3.09-0.342-4.401-0.99c-1.354-0.666-2.539-1.658-3.554-2.932
		c-1.026-1.287-1.84-2.873-2.476-4.703c-0.701-2.018-1.61-5.393-1.372-7.515v0.042c0.073-0.029,0.147-0.058,0.224-0.086
		c-0.377,3.349,1.694,9.493,3.794,12.127c1.941,2.436,4.511,3.816,7.706,3.84h0.078h0.08c3.221-0.023,5.968-1.525,8.06-4.086
		l0.048-0.061l0.015-0.018c0.065-0.08,0.129-0.162,0.192-0.246c2.455-3.191,3.748-7.563,3.951-11.554l-0.01-0.003
		c0.076,0.028,0.15,0.057,0.223,0.086C63.294,26.486,62.767,28.854,61.876,31.167L61.876,31.167z M62.993,23.863L62.993,23.863
		l0.069,0.024L62.993,23.863z"/>
	<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" fill="#000001" d="M62.383,23.631l0.001,1.388
		c-2.568-1.019-5.091-2.174-9.881-2.174c-4.79,0-10.729,1.473-13.297,2.492l-0.009-1.408c2.718-1.033,7.092-1.704,12.024-1.704
		C55.661,22.226,59.648,22.769,62.383,23.631z"/>
	
		<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#2A100A" stroke-width="1.167" stroke-linecap="round" stroke-miterlimit="2.6131" d="
		M48.769,34.872c0,0,2.086,1.539,5.132,0.008"/>
	<g>
		<path fill="#2A100A" d="M50.51,37.077l0.119,0.465l-0.007,0.004l-0.007,0.006l-0.007,0.002l-0.007,0.004l-0.007,0.002
			l-0.008,0.002l-0.007,0.002h-0.007h-0.008l-0.007-0.002L50.55,37.56l-0.008-0.002l-0.006-0.002l-0.007-0.002l-0.007-0.004
			l-0.006-0.004l-0.007-0.006l-0.006-0.004l-0.006-0.006l-0.006-0.008l-0.006-0.006l-0.006-0.008l-0.005-0.006l-0.005-0.01
			l-0.005-0.008l-0.004-0.01l-0.005-0.01l-0.004-0.01l-0.004-0.01l-0.003-0.012l-0.003-0.012l-0.003-0.012l-0.003-0.012
			l-0.002-0.012l-0.002-0.014l-0.001-0.012l-0.001-0.012l-0.001-0.014l0-0.012v-0.012V37.3v-0.012l0.001-0.012l0.001-0.012
			l0.001-0.014l0.002-0.01l0.002-0.014l0.003-0.012l0.002-0.01l0.003-0.012l0.003-0.01l0.004-0.012l0.004-0.01l0.004-0.01
			l0.004-0.008l0.005-0.01l0.005-0.01l0.005-0.008l0.005-0.008l0.006-0.008l0.006-0.006l0.007-0.008l0.006-0.006L50.51,37.077
			L50.51,37.077z M52.214,37.462l-0.231-0.318l-0.008,0.293l0.046,0.072l0.009,0.008l-0.008-0.006l-0.017-0.006l-0.025-0.01
			l-0.03-0.01l-0.036-0.008l-0.04-0.012l-0.045-0.01l-0.047-0.008l-0.051-0.01l-0.054-0.008l-0.056-0.008l-0.059-0.006l-0.06-0.006
			l-0.061-0.006l-0.063-0.002l-0.063-0.004h-0.063l-0.063,0.002l-0.062,0.002l-0.061,0.006l-0.06,0.008l-0.058,0.008l-0.056,0.01
			l-0.053,0.014l-0.051,0.014l-0.046,0.018l-0.042,0.02l-0.038,0.021l-0.032,0.021l-0.119-0.465l0.052-0.035l0.054-0.029
			l0.057-0.025l0.059-0.021l0.061-0.018l0.062-0.016l0.064-0.012l0.065-0.012l0.066-0.006l0.067-0.006l0.067-0.002l0.067-0.002
			h0.068l0.067,0.002l0.065,0.004l0.066,0.004l0.063,0.006l0.062,0.008l0.06,0.008l0.057,0.01l0.055,0.01l0.052,0.01l0.048,0.01
			l0.044,0.012L52,36.987l0.037,0.012l0.034,0.012l0.031,0.012l0.029,0.016l0.033,0.027l0.06,0.088L52.214,37.462L52.214,37.462z
			 M51.983,37.144l0.231,0.318l-0.005,0.01l-0.005,0.008l-0.005,0.01l-0.006,0.01l-0.006,0.006l-0.006,0.008l-0.006,0.008
			l-0.006,0.006l-0.006,0.006l-0.006,0.004l-0.007,0.004l-0.006,0.004l-0.007,0.004l-0.007,0.004h-0.007l-0.008,0.002l-0.007,0.002
			h-0.007h-0.007l-0.007-0.002h-0.007l-0.007-0.002l-0.007-0.004l-0.007-0.002l-0.007-0.004l-0.007-0.004l-0.007-0.004l-0.006-0.006
			l-0.006-0.006l-0.006-0.008l-0.006-0.006l-0.006-0.01L52,37.491l-0.005-0.008l-0.005-0.01l-0.004-0.01l-0.005-0.01l-0.004-0.012
			l-0.004-0.01l-0.003-0.01l-0.003-0.012l-0.003-0.012l-0.002-0.012l-0.003-0.012l-0.001-0.01l-0.002-0.012l-0.001-0.014l0-0.012
			l0-0.012l0-0.012l0-0.012l0-0.014l0-0.012l0.001-0.012l0.001-0.012l0.002-0.012l0.001-0.014l0.002-0.01l0.003-0.012l0.003-0.012
			l0.003-0.012l0.004-0.01l0.004-0.012L51.983,37.144z"/>
	</g>
	<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" fill="#000001" d="M60.076,25.364
		c1.235,0.026,1.771,0.672,3.035,0.672c0.784-0.008,0.701,1.276,0.287,1.752c-0.565,0.553-0.752,0.773-0.83,1.471
		c-0.002,0.652-0.089,1.338-0.228,2.023c-1.384,5.896-9.588,3.791-10.522-1.795l-0.034-0.053c-0.152-0.424-0.432-0.709-0.753-0.709
		c-0.33,0-0.618,0.301-0.766,0.746c-0.921,5.598-9.139,7.713-10.525,1.811c-0.163-0.807-0.255-1.615-0.221-2.369
		c-0.009,0.121-0.013,0.234-0.015,0.346c-0.077-0.697-0.265-0.918-0.83-1.471c-0.414-0.476-0.497-1.76,0.288-1.752
		c1.539,0,3.899-1.017,6.289-1.017c2.371,0.141,3.624,0.491,4.296,1.06l-0.004-0.005c0.324,0.171,0.872,0.284,1.494,0.284
		c0.641,0,1.204-0.12,1.523-0.3c0.678-0.556,1.93-0.899,4.271-1.038C58.313,25.019,59.341,25.147,60.076,25.364z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" d="M60.874,24.703c1.304,0.027,1.868,0.673,3.203,0.673
		c0.828-0.008,0.741,1.276,0.303,1.751c-0.596,0.553-0.794,0.774-0.876,1.471c-0.002,0.652-0.094,1.338-0.24,2.021
		c-1.461,5.9-10.118,3.793-11.104-1.793l-0.036-0.053c-0.16-0.424-0.456-0.709-0.794-0.709c-0.349,0-0.652,0.301-0.809,0.746
		c-0.973,5.598-9.644,7.713-11.106,1.809c-0.171-0.805-0.269-1.613-0.233-2.369c-0.009,0.121-0.013,0.238-0.015,0.348
		c-0.082-0.697-0.279-0.918-0.875-1.471c-0.437-0.475-0.525-1.759,0.303-1.751c1.625,0,4.115-1.017,6.636-1.017
		c2.502,0.141,3.825,0.491,4.533,1.06l-0.004-0.005c0.342,0.171,0.92,0.284,1.576,0.284c0.677,0,1.271-0.12,1.607-0.299
		c0.715-0.556,2.037-0.9,4.506-1.039C59.014,24.359,60.098,24.487,60.874,24.703z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" d="M49.886,10.032c0.27-0.036,0.546-0.063,0.83-0.079L50.714,9.94
		c0-0.02,0-0.039,0-0.057c0-0.23,0.057-0.439,0.148-0.59v0l0,0c0.092-0.151,0.22-0.245,0.359-0.245c0.14,0,0.267,0.094,0.36,0.245
		l0,0c0.091,0.151,0.148,0.36,0.148,0.59c0,0.015,0,0.033-0.001,0.05L51.728,9.95c0.273,0.014,0.55,0.041,0.829,0.082
		c-0.101-0.965-0.572-1.719-1.162-1.844l0,0l-0.035-0.007l0,0l-0.031-0.004l-0.002-0.001h-0.001l-0.002,0l-0.031-0.003l-0.001,0l0,0
		h0L51.257,8.17h0l0,0h0l-0.035,0l-0.035,0l0,0l0,0h0l-0.034,0.002h0l0,0l-0.001,0L51.12,8.176l-0.002,0h-0.001l-0.003,0.001
		l-0.031,0.004h0l-0.034,0.007l0,0C50.458,8.313,49.986,9.067,49.886,10.032z"/>
	<g>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" d="M42.527,7.231c-3.94,0-7.134,0.589-7.134,1.314
			c0,0.726,3.194,1.315,7.134,1.315s7.134-0.589,7.134-1.315C49.661,7.82,46.467,7.231,42.527,7.231z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" d="M59.916,7.231c3.939,0,7.134,0.589,7.134,1.315
			c0,0.726-3.194,1.314-7.134,1.314c-3.94,0-7.134-0.588-7.134-1.314C52.782,7.82,55.976,7.231,59.916,7.231z"/>
	</g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFCE88" d="M45.161,25.369c4.019,0.226,4.213,1.133,4.277,2.776
		c-0.064,5.01-7.675,7.154-8.901,2.201c-0.274-1.285-0.309-2.578,0.268-3.511C41.3,26.036,41.976,25.369,45.161,25.369z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFCE88" d="M57.517,25.369c-4.02,0.226-4.213,1.133-4.277,2.776
		c0.064,5.01,7.674,7.154,8.901,2.201c0.273-1.285,0.308-2.578-0.268-3.511C61.377,26.036,60.702,25.369,57.517,25.369z"/>
	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" points="61.347,29.12 58.06,27.25 57.79,28.128 59.439,29.114 
		57.812,30.081 58.083,30.978 	"/>
	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" points="56.937,26.886 57.635,26.886 56.293,31.024 
		55.595,31.024 	"/>
	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#2A100A" points="42.54,29.138 45.899,27.226 46.176,28.122 44.49,29.132 
		46.153,30.12 45.877,31.038 	"/>
	<g>
		<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M44.813,25.968c-2.095,0-2.64,0.313-3.086,0.69
			c-0.52,0.438-0.693,1.046-0.707,1.651c0.015,0.58,0.356,0.953,0.873,1.15c-0.195-0.203-0.313-0.469-0.321-0.801
			c0.014-0.605,0.188-1.215,0.707-1.652c0.447-0.376,0.992-0.689,3.087-0.689c0.895,0.036,1.481,0.109,1.857,0.223
			C47.042,26.223,46.43,26.034,44.813,25.968z"/>
		<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M57.637,25.968c-2.095,0-2.641,0.313-3.087,0.69
			c-0.521,0.438-0.693,1.046-0.708,1.651c0.015,0.58,0.356,0.953,0.874,1.15c-0.196-0.203-0.313-0.469-0.321-0.801
			c0.014-0.605,0.188-1.215,0.707-1.652c0.447-0.376,0.993-0.689,3.087-0.689c0.895,0.036,1.481,0.109,1.858,0.223
			C59.864,26.223,59.252,26.034,57.637,25.968z"/>
	</g>
	<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" fill="#000001" d="M62.417,24.581l7.641,3.064
		c0.143,0.068,0.096,0.254,0.085,0.346c-0.011,0.09-1.248,2.254-4.252,2.877c-3.005,0.625-5.205-2.182-5.205-2.182l-4.928-5.515
		l3.181,0.438L62.417,24.581z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#192866" d="M63.419,24.381l7.627,2.796c0.159,0.066,0.106,0.246,0.094,0.332
		c-0.012,0.086-1.38,2.164-4.705,2.766c-3.325,0.598-5.759-2.098-5.759-2.098l-5.79-5.634l6.488,0.9L63.419,24.381z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#5ABD88" d="M51.221,9.932c6.738,0,12.2,5.462,12.2,12.201l0.001,1.866
		c-2.703-1.072-7.16-1.772-12.201-1.772s-9.498,0.7-12.201,1.772v-1.866C39.021,15.394,44.483,9.932,51.221,9.932z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#192866" d="M60.089,23.044V22.47c0-6.094-3.009-11.184-7.021-12.399
		c5.861,0.891,10.352,5.952,10.352,12.062l0.001,1.866C62.5,23.632,61.374,23.31,60.089,23.044L60.089,23.044z M51.221,9.932
		L51.221,9.932c-2.272,0.001-4.118,5.559-4.156,12.459c1.319-0.107,2.714-0.165,4.156-0.165c1.442,0,2.836,0.058,4.156,0.165
		C55.339,15.49,53.493,9.932,51.221,9.932L51.221,9.932L51.221,9.932z M42.353,23.044c-1.284,0.266-2.41,0.588-3.332,0.954v-1.866
		c0-6.109,4.49-11.169,10.351-12.062c-4.01,1.217-7.019,6.305-7.019,12.399V23.044z"/>
	<path fill="#2A100A" d="M63.419,23.996l0,0.385c-3.474-1.376-8.462-1.827-12.199-1.827c-3.722,0-9.509,0.688-12.199,1.829l0-0.385
		c3.333-1.333,8.672-1.809,12.2-1.809C54.747,22.188,60.236,22.692,63.419,23.996z"/>
</g>
</svg>
		  </a>
		</div>
	</div>

</nav><!--End Nav bar -->
<!-- Header Ends -->

<!-- Sidebar Starts -->
<div class="pmd-sidebar-overlay"></div>

<!-- Left sidebar -->
<aside class="pmd-sidebar sidebar-default pmd-sidebar-slide-push pmd-sidebar-left pmd-sidebar-open bg-fill-darkblue sidebar-with-icons" role="navigation">
	<ul class="nav pmd-sidebar-nav">
		
		<!-- User info -->
		<li class="dropdown pmd-dropdown pmd-user-info visible-xs visible-md visible-sm visible-lg">
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" aria-expandedhref="javascript:void(0);">
				<div class="media-left">
					<img src="themes/images/user-icon.png" alt="New User">
				</div>
				<div class="media-body media-middle">Propeller Admin</div>
				<div class="media-right media-middle"><i class="dic-more-vert dic"></i></div>
			</a>
			<ul class="dropdown-menu">
				<li><a href="login.html">Logout</a></li>
			</ul>
		</li><!-- End user info -->
		
		<li> 
			<a class="pmd-ripple-effect" href="index.html">	
				<i class="media-left media-middle"><svg version="1.1" x="0px" y="0px" width="19.83px" height="18px" viewBox="287.725 407.535 19.83 18" enable-background="new 287.725 407.535 19.83 18"
	 xml:space="preserve">
<g>
	<path fill="#C9C8C8" d="M307.555,407.535h-9.108v10.264h9.108V407.535z M287.725,407.535v6.232h9.109v-6.232H287.725z
		 M296.834,415.271h-9.109v10.264h9.109V415.271z M307.555,419.303h-9.108v6.232h9.108V419.303z"/>
</g>
</svg></i>
				<span class="media-body">Dashboard</span>
			</a> 
		</li>
		
		<li class="dropdown pmd-dropdown"> 
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" href="javascript:void(0);">	
				<i class="media-left media-middle"><svg version="1.1" x="0px" y="0px" width="18px" height="18.001px" viewBox="0 0 18 18.001" enable-background="new 0 0 18 18.001" xml:space="preserve">
<path fill="#C9C8C8" d="M6.188,0.001C5.232,0.001,4.5,0.732,4.5,1.688c0,0.394,0.166,0.739,0.334,1.02L5.45,3.71
	c0.113,0.113,0.176,0.341,0.176,0.51v0.281c0,0.619-0.506,1.125-1.125,1.125H0.282c-0.169,0-0.281,0.112-0.281,0.281V17.72
	c0,0.168,0.112,0.281,0.281,0.281h4.219c0.619,0,1.125-0.506,1.125-1.125v-0.281c0-0.168-0.063-0.397-0.176-0.509
	c0,0-0.615-0.946-0.615-1.002C4.666,14.802,4.5,14.457,4.5,14.063c0-0.956,0.731-1.688,1.688-1.688s1.688,0.731,1.688,1.688
	c0,0.394-0.166,0.739-0.334,1.02l-0.616,1.002c-0.056,0.112-0.176,0.341-0.176,0.509v0.281c0,0.619,0.506,1.125,1.125,1.125h4.219
	c0.168,0,0.281-0.113,0.281-0.281V13.5c0-0.619,0.506-1.125,1.125-1.125h0.281c0.169,0,0.396,0.063,0.51,0.176
	c0,0,0.945,0.616,1.002,0.616c0.337,0.168,0.626,0.334,1.02,0.334c0.956,0,1.687-0.731,1.687-1.687c0-0.957-0.731-1.688-1.687-1.688
	c-0.394,0-0.738,0.166-1.02,0.334l-1.002,0.616c-0.113,0.056-0.341,0.176-0.51,0.176H13.5c-0.619,0-1.125-0.506-1.125-1.125V5.908
	c0-0.168-0.113-0.281-0.281-0.281H7.875c-0.619,0-1.125-0.506-1.125-1.125V4.221c0-0.168,0.063-0.397,0.176-0.51
	c0,0,0.616-0.945,0.616-1.001c0.168-0.281,0.334-0.626,0.334-1.02C7.875,0.733,7.144,0.002,6.188,0.001L6.188,0.001z"/>
</svg></i> 
				<span class="media-body">UI Elements</span>
				<div class="media-right media-bottom"><i class="dic-more-vert dic"></i></div>
			</a> 
			<ul class="dropdown-menu">
				<li><a href="typography.html">Typography</a></li>
				<li><a href="icons.html">Icons</a></li>
				<li><a href="shadow.html">Shadow</a></li>
				<li><a href="accordion.html">Accordion</a></li>
				<li><a href="alert.html">Alert</a></li>
				<li><a href="badge.html">Badge</a></li>
				<li><a href="button.html">Button</a></li>
				<li><a href="modal.html">Modal</a></li>
				<li><a href="dropdown.html">Dropdown</a></li>
				<li><a href="list.html">List</a></li>
				<li><a href="navbar.html">Navbar</a></li>
				<li><a href="popover.html">Popover</a></li>
				<li><a href="progressbar.html">Progressbar</a></li>
				<!--<li><a href="sidebar.html">Sidebar</a></li> -->
				<li><a href="tab.html">Tab</a></li>
				<li><a href="tooltip.html">Tooltip</a></li>
				<li><a href="card.html">Card</a></li>
				<li><a href="floating-button.html">Floating Action Button</a></li>
			</ul>
		</li>
		<li class="dropdown pmd-dropdown"> 
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" href="javascript:void(0);">	
				<i class="material-icons media-left pmd-sm">swap_calls</i> 
				<span class="media-body">Third Party Elements</span>
				<div class="media-right media-bottom"><i class="dic-more-vert dic"></i></div>
			</a> 
			<ul class="dropdown-menu">
				<li><a href="custom-scroll.html">Custom Scrollbar</a></li>
				<li><a href="datetimepicker.html">Datetimepicker</a></li>
				<li><a href="range-slider.html">Range Slider</a></li>
				<li><a href="select2.html">Select2</a></li>
			</ul>
		</li>
		
		<li class="dropdown pmd-dropdown"> 
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" href="javascript:void(0);">	
				<i class="media-left media-middle"><svg version="1.1" x="0px" y="0px" width="14.187px" height="18px" viewBox="0 0 14.187 18" enable-background="new 0 0 14.187 18" xml:space="preserve">
<path fill="#C9C8C8" d="M0,0v18h14.187V0H0z M3.121,3.293h2.023v4.767H3.121V3.293z M11.211,14.764H2.948v-2.022h8.263V14.764
	L11.211,14.764z M11.211,11.585H2.948V9.563h8.263V11.585L11.211,11.585z M11.211,8.407H7.455V6.385h3.756V8.407z M11.211,5.229
	H7.455V3.207h3.756V5.229z"/>
</svg></i>
				<span class="media-body">Form</span>
				<div class="media-right media-bottom"><i class="dic-more-vert dic"></i></div>
			</a> 
			<ul class="dropdown-menu">
				<li><a href="form-element.html">Form Elements</a></li>
				<li><a href="form.html">Form Examples</a></li>
			</ul>
		</li>
		<li class="dropdown pmd-dropdown"> 
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" href="javascript:void(0);">	
				<i class="media-left media-middle"><svg version="1.1" x="0px" y="0px" width="18px" height="12.706px" viewBox="0 0 18 12.706" enable-background="new 0 0 18 12.706" xml:space="preserve">
<path fill="#C9C8C8" d="M0,0v12.706h18V0H0z M12.706,4.235v3.176H9.108V4.235H12.706z M8.049,4.235v3.176h-6.99V4.235H8.049z
	 M1.059,8.47h6.99v3.177h-6.99V8.47z M9.108,11.647V8.47h3.599v3.177H9.108z M13.766,11.647V8.47h3.176v3.177H13.766z M16.942,7.412
	h-3.176V4.235h3.176V7.412L16.942,7.412z"/>
</svg></i> 
				<span class="media-body">Table</span>
				<div class="media-right media-bottom"><i class="dic-more-vert dic"></i></div>
			</a> 
			<ul class="dropdown-menu">
				<li><a href="table.html">Normal Table</a></li>
				<li><a href="data-table.html">Data Table</a></li>
				<li><a href="table-with-expand-collapse.html">Table with Expand/Collapse</a></li>
			</ul>
		</li>

		<li class="dropdown pmd-dropdown"> 
			<a aria-expanded="false" data-toggle="dropdown" class="btn-user dropdown-toggle media" data-sidebar="true" href="javascript:void(0);">	
				<i class="media-left media-middle">
				<svg x="0px" y="0px" width="18px" height="18px" viewBox="288.64 337.535 18 18" enable-background="new 288.64 337.535 18 18" xml:space="preserve">
					<title>022-layout view</title>
					<desc>Created with Sketch.</desc>
					<g>
						<g>
							<path fill="#C9C8C8" d="M298.765,353.285v-2.25h3.375v-3.375h2.25v5.625H298.765z M290.89,347.66h2.25v3.375h3.375v2.25h-5.625
								V347.66z M296.515,339.785v2.25h-3.375v3.375h-2.25v-5.625H296.515z M295.39,348.785h4.5v-4.5h-4.5V348.785z M304.39,345.41h-2.25
								v-3.375h-3.375v-2.25h5.625V345.41z M288.64,355.535h18v-18h-18V355.535z"/>
						</g>
					</g>
					<text transform="matrix(1 0 0 1 -0.0154 1202.2578)" font-family="'HelveticaNeue-Bold'" font-size="186.0251">Created by Richard Wearn</text>
					<text transform="matrix(1 0 0 1 -0.0154 1388.2891)" font-family="'HelveticaNeue-Bold'" font-size="186.0251">from the Noun Project</text>
				</svg></i> 
				<span class="media-body">Pages</span>
				<div class="media-right media-bottom"><i class="dic-more-vert dic"></i></div>
			</a> 
			<ul class="dropdown-menu">
				<li><a href="about.html">About</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="404.html">404</a></li>
				<li><a href="blank.html">Blank</a></li>
				<li><a href="profile.html">Profile</a></li>
			</ul>
		</li>
		<li> 
			<a class="pmd-ripple-effect" href="login.html">	
				<i class="media-left media-middle">
				<svg version="1.1" id="Layer_1" x="0px" y="0px" width="18px" height="18px" viewBox="288.64 337.535 18 18" enable-background="new 288.64 337.535 18 18" xml:space="preserve">
				<path fill="#C9C8C8" d="M295.39,337.535v2.25h9v13.5h-9v2.25h11.25v-18H295.39z M297.64,342.035v3.375h-9v2.25h9v3.375l3.375-3.375
					l1.125-1.125l-1.125-1.125L297.64,342.035z"/>
				</svg></i> 
				<span class="media-body">Login</span>
			</a> 
		</li>
		<li> 
			<a class="pmd-ripple-effect" href="inbox.html">	
				<i class="media-left media-middle">
				<svg version="1.1" x="0px" y="0px" width="18px" height="12.479px" viewBox="288.64 363.118 18 12.479" enable-background="new 288.64 363.118 18 12.479" xml:space="preserve">
					<g transform="translate(641.29613,1096.2351)">
						<path fill="#C9C8C8" d="M-352.656-726.466v-5.828l4.484,4.484c2.467,2.466,4.499,4.484,4.516,4.484s2.049-2.018,4.516-4.484
							l4.484-4.484v5.828v5.828h-9h-9V-726.466z M-347.854-728.929l-4.188-4.188h8.385h8.386l-4.188,4.188
							c-2.304,2.303-4.192,4.188-4.198,4.188S-345.551-726.626-347.854-728.929z"/>
					</g>
				</svg></i> 
				<span class="media-body">Inbox</span>
			</a> 
		</li>
		<li> 
			<a class="pmd-ripple-effect" href="notifications.html">	
				<i class="media-left media-middle">
				<svg version="1.1" id="Layer_1" x="0px" y="0px" width="15.3px" height="18px" viewBox="289.99 337.535 15.3 18" enable-background="new 289.99 337.535 15.3 18" xml:space="preserve">
					<g>
						<g>
							<path fill="#C9C8C8" d="M297.64,355.535c0.99,0,1.8-0.81,1.8-1.8h-3.6C295.84,354.725,296.65,355.535,297.64,355.535z
								 M303.49,350.135v-4.95c0-2.79-1.891-5.041-4.501-5.67v-0.63c0-0.72-0.63-1.35-1.35-1.35c-0.72,0-1.35,0.63-1.35,1.35v0.63
								c-2.61,0.629-4.5,2.88-4.5,5.67v4.95l-1.8,1.8v0.9h15.3v-0.9L303.49,350.135z"/>
						</g>
					</g>
				</svg></i> 
				<span class="media-body">Notifications</span>
			</a> 
		</li>
		
	</ul>
</aside><!-- End Left sidebar -->
<!-- Sidebar Ends -->
	
<!--Lists -->
<div id="content" class="pmd-content">

    <!-- Buttons -->
	<div class="container-fluid">

		<!-- Title -->
		<h1 class="section-title" id="services">
			<span>List</span>
		</h1><!-- End Title -->
		
		<!--breadcrum start-->
		<ol class="breadcrumb text-left">
		  <li><a href="index.html">Dashboard</a></li>
		  <li class="active">List</li>
		</ol><!--breadcrum end-->
	
		<!-- component header -->
		<div class="componant-title-bg"> 
			<p class="lead">List is a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
		</div> <!-- component header end -->
		
		<div class="list-custom"> 
			<!-- simple list -->
			<section class="row component-section">
				
				<!-- single line list title and description -->
				<div class="col-md-3">
					<div id="simple">
						<h2>Bootstrap list</h2>
					</div>
					<p>Three different types of lists are defined in Bootstrap: <strong>Unordered List</strong>, <strong>Ordered List</strong>, and <strong>Unstyled List</strong>.</p> 
				</div> <!-- single line list title and description end -->
				
				<!-- Bootstrap list code and example -->
				<div class="col-md-9"> 
					<!-- Bootstrap basic list-->
					<div class="component-box">

						<!-- simple list example -->
						<div class="row">
							<div class="col-md-4"> 
								<div class="pmd-card pmd-z-depth pmd-card-custom-view">
									<div class="pmd-card-body">
										<ul>
										  <li>First item</li>
										  <li>Second item</li>
										  <li>Third item
											<ul>
												<li>Nested First item</li>
												<li>Nested Second item</li>
											</ul>
										  </li>
										  <li>Forth item</li>
										  <li>Fifth item</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-md-4"> 
								<div class="pmd-card pmd-z-depth pmd-card-custom-view">
									<div class="pmd-card-body">
										<ol>
											<li>First item</li>
											<li>Second item</li>
											<li>Third item
												<ol>
													<li>Nested First item</li>
													<li>Nested Second item</li>
												</ol>
											</li>
											<li>Forth item</li>
											<li>Fifth item</li>
										</ol>
									</div>
								</div>
							</div>
							<div class="col-md-4"> 
								<div class="pmd-card pmd-z-depth pmd-card-custom-view">
									<div class="pmd-card-body">
										<ul class="list-unstyled">
											<li>First item</li>
											<li>Second item
												<ul>
													<li>Nested First item</li>
													<li>Neted Second iteom</li>
												</ul>
											</li>
											<li>Third item</li>
											<li>forth item</li>
											<li>Fifth item</li>
										</ul>
									</div>
								</div>
							</div>
						</div> <!-- simple list example end -->
						<p class="component-desc">Three different types of lists are defined in Bootstrap: <strong>Unordered List</strong>, <strong>Ordered List</strong>, and <strong>Unstyled List</strong>.</p>

					</div><!-- Bootstrap basic list ends--> 
					<!-- Description list-->
					<div class="component-box">
						<!-- Description list example -->
						<div class="row">
							<div class="col-md-12">
								<div class="pmd-card pmd-z-depth">
									<div class="pmd-card-body">
										<dl class="dl-horizontal"> 
											<dt>Description lists</dt> 
											<dd>A description list is perfect for defining terms.</dd> 
											<dt>Unordered</dt> 
											<dd>A list of items in which the order does not explicitly matter.</dd> 
											<dt>Ordered</dt> 
											<dd>A list of items in which the order does explicitly matter.</dd> 
											<dt>Unstyled</dt> 
											<dd>Remove the default <code>list-style</code> and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add                                            the class for any nested lists as well.</dd> 
											<dt>Horizontal description</dt>
											<dd>Make terms and descriptions in <code><</code><code>dl</code><code>></code> line up side-by-side. Starts off stacked like default <code><</code><code>dl</code><code>></code>, but when the navbar expands, so do these.
										</dl>
									</div>
								</div>
								<p class="component-desc">Bootstrap provides <strong>Description List</strong> which consists of a list of terms with their associated description. </p>
							</div>
							
						</div> <!-- Description list example end -->
						
					</div><!-- Description list end -->
				</div> <!-- Bootstrap code and example end -->
			</section> <!-- Bootstrap list end -->
			
			<!-- single line list -->
			<section class="row component-section">
				
				<!-- single line list title and description -->
				<div class="col-md-3">
					<div id="single">
						<h2>Single line list</h2>
					</div>
					<p>In a <strong>single-line list</strong>, each tile contains a single line of text. The amount of text can vary between tiles within the same list.</p>
					Add <code>.pmd-card-list</code> followed by <code>.list-group</code> for the basic formatting of your list. 
				</div> <!-- single line list title and description end -->
				
				<!-- single line list code and example -->
				<div class="col-md-9"> 
					<div class="component-box">
						<!-- single line list example -->
						<div class="row">
							<div class="col-md-6"> 
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
								  <li class="list-group-item">Single-line item</li>
								  <li class="list-group-item">Single-line item</li>
								  <li class="list-group-item">Single-line item</li>
								  <li class="list-group-item">Single-line item</li>
								  <li class="list-group-item">Single-line item</li>
								</ul>
							</div>
							<div class="col-md-6"> 	
								<ul class="list-group pmd-z-depth pmd-card-list pmd-list-icon">
									<li class="list-group-item"> 
										<i class="material-icons media-left pmd-sm">mood</i> 
										<span class="media-body">Single-line item with icon</span>
									</li>
									<li class="list-group-item">
										<i class="material-icons media-left media-middle">notifications</i>
										<div class="media-body">Single-line item with icon</div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left">person_add</i>
										<div class="media-body">Single-line item with icon</div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left">share</i>
										<div class="media-body">Single-line item with icon</div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left">drive_eta</i>
										<div class="media-body">Single-line item with icon</div>
									</li>
								</ul>
								<p class="component-desc"><strong>Icon list</strong> displays icon before the text lines. Add <code>.pmd-list-icon</code> for list with icons.</p>
							</div>
						</div> <!-- single line list example end -->
						
					</div>
				</div> <!-- single line list code and example end -->
				
				<!-- avatar list title and description-->
				<div class="col-md-3">
					<h2>&nbsp;</h2>
					<p>Distinguishing elements of list tiles need to be on the left for Left-to-Right interfaces, and vice versa. States and primary actions are placed on the left side of a list tile. Text within a list item should be considered part of the primary action target.</p>
				</div> <!-- avatar list title and description end -->
				
				<!-- avatar list code and example -->
				<div class="col-md-9"> 
					<div class="component-box">
						<!-- avatar list example -->
						<div class="row">
							<div class="col-md-6">
								<ul class="list-group pmd-z-depth pmd-card-list pmd-list-avatar">
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body media-middle"> Single-line item with avatar </div>
									</li>
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body media-middle"> Single-line item with avatar </div>
									</li>
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body media-middle"> Single-line item with avatar </div>
									</li>
								</ul>
								<p class="component-desc">Example of a single-line item with avatar.</p>
							</div>
							<div class="col-md-6">
								<ul class="list-group pmd-z-depth pmd-card-list pmd-list-avatar">
									<li class="list-group-item">
										<div class="media-left"> <a class="avatar-list-img" href="javascript:void(0);"> <img data-holder-rendered="true" src="../../components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40"> </a> </div>
										<div class="media-body media-middle"> Single-line item with avatar and icon </div>
										<i class="material-icons media-middle media-right">check_box</i> </li>
									<li class="list-group-item">
										<div class="media-left"> <a class="avatar-list-img" href="javascript:void(0);"> <img data-holder-rendered="true" src="../../components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40"> </a> </div>
										<div class="media-body media-middle"> Single-line item with avatar and icon </div>
										<i class="material-icons media-middle media-right">check_box_outline_blank</i> </li>
									<li class="list-group-item">
										<div class="media-left"> <a class="avatar-list-img" href="javascript:void(0);"> <img data-holder-rendered="true" src="../../components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40"> </a> </div>
										<div class="media-body media-middle"> Single-line item with avatar and icon </div>
										<i class="material-icons media-middle media-right">check_box_outline_blank</i> </li>
								</ul>
								<p class="component-desc">Example of a single-line item with avatar and icon.</p>
							</div>
						</div> <!-- avatar list example end -->
						
					</div>
				</div> <!-- avatar list code and example end -->
			</section> <!-- single line list end -->
			
			<!-- Two Line List -->
			<section class="row component-section">
				
				<!-- Two Line List title and description -->
				<div class="col-md-3">
					<div id="twoll">
						<h2>Two Line List</h2>
					</div>
					<p>In a <strong>two-line list</strong>, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.</p>
				</div> <!-- Two Line List title and description end -->
				
				<!-- Two Line List code and example -->
				<div class="col-md-9"> 
					<div class="component-box">
						<!-- two line list example -->
						<div class="row">
							<div class="col-md-4"> 
								<!--Two line list -->
								<ul class="list-group pmd-z-depth pmd-card-list pmd-list">
									<li class="list-group-item">
										<h3 class="list-group-item-heading">Two-line item</h3>
										<span class="list-group-item-text">Secondary text</span> </li>
									<li class="list-group-item">
										<h3 class="list-group-item-heading">Two-line item</h3>
										<span class="list-group-item-text">Secondary text</span> </li>
									<li class="list-group-item">
										<h3 class="list-group-item-heading">Two-line item</h3>
										<span class="list-group-item-text">Secondary text</span> </li>
								</ul>
								<p class="component-desc">Two-line List</p>
							</div>
							<div class="col-md-4"> 
								<!--Two line list with icon -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item"> <i class="material-icons media-left media-middle">mood</i>
										<div class="media-body">
											<h3 class="list-group-item-heading">Two-line item</h3>
											<span class="list-group-item-text">Secondary text</span> </div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left media-middle">notifications</i>
										<div class="media-body">
											<h3 class="list-group-item-heading">Two-line item</h3>
											<span class="list-group-item-text">Secondary text</span> </div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left media-middle">share</i>
										<div class="media-body">
											<h3 class="list-group-item-heading">Two-line item</h3>
											<span class="list-group-item-text">Secondary text</span> </div>
									</li>
								</ul>
								<p class="component-desc">Two-line List with Icon</p>
							</div>
							<div class="col-md-4"> 
								<!--Avatar with secondary text -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item">
										<div class="media-left"> <a class="avatar-list-img avatar-list-img-custom" href="javascript:void(0);"> <img data-holder-rendered="true" src="../../components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40"> </a> </div>
										<div class="media-body media-middle">
											<h3 class="list-group-item-heading">Two-line item</h3>
											<span class="list-group-item-text">Secondary text</span> </div>
									</li>
									<li class="list-group-item">
										<div class="media-left"> <a class="avatar-list-img avatar-list-img-custom" href="javascript:void(0);"> <img data-holder-rendered="true" src="../../components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40"> </a> </div>
										<div class="media-body media-middle">
											<h3 class="list-group-item-heading">Two-line item</h3>
											<span class="list-group-item-text">Secondary text</span> </div>
									</li>
									<li class="list-group-item">
										<div class="media-left"> <a class="avatar-list-img avatar-list-img-custom" href="javascript:void(0);"> <img data-holder-rendered="true" src="../../components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40"> </a> </div>
										<div class="media-body media-middle">
											<h3 class="list-group-item-heading">Two-line item</h3>
											<span class="list-group-item-text">Secondary text</span> </div>
									</li>
								</ul>
								<p class="component-desc">Avatar with Two-line List</p>
							</div>
						</div> <!-- two line list example end -->
					</div>
				</div> <!-- Two Line List code and example end -->
			</section> <!-- Two Line List end -->
			 
			<!-- Three Line List -->
			<section class="row component-section">
				
				<!-- Three Line List title and description --> 
				<div class="col-md-3">
					<div id="thl">
						<h2>Three Line List</h2>
					</div>
					<p>If the secondary text is of two lines, it will appear like this.</p>
				</div> <!-- Three Line List title and description end -->
				
				<!-- Three Line List code and example -->
				<div class="col-md-9"> 
					<div class="component-box">
						<!-- three line list example -->
						<div class="row">
							<div class="col-md-6"> 
								<!--Three-line list group start -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item">
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">In a three-line list, each tile contains a maximum of three lines of text.</span> </div>
									</li>
									<li class="list-group-item">
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">The amount of text can vary between tiles within the same list.</span> </div>
									</li>
									<li class="list-group-item">
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">If more than three lines of text need to be shown in list tiles, use cards instead.</span> </div>
									</li>
								</ul>
								<!--Three line list group end -->
								<p class="component-desc">Three-line List</p>
							</div>
							<div class="col-md-6"> 
								<!--Three line with icon list group start -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item"> <i class="material-icons media-left pmd-sm">mood</i>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">In a three-line list, each tile contains a maximum of three lines of text.</span> </div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left">notifications</i>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">The amount of text can vary between tiles within the same list.</span> </div>
									</li>
									<li class="list-group-item"> <i class="material-icons media-left">share</i>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">If more than three lines of text need to be shown in list tiles, use cards instead.</span> </div>
									</li>
								</ul>
								<!--Three line with icon list group end -->
								<p class="component-desc">Three-line List with Icon</p>
							</div>
						</div> <!-- three line list example end -->
						
					</div>
					<div class="component-box">
						<!-- three line list with media -->
						<div class="row">
							<div class="col-md-6"> 
								<!--Avatar with Three Line Text start -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">In a three-line list, each tile contains a maximum of three lines of text.</span> </div>
									</li>
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">The amount of text can vary between tiles within the same list.</span> </div>
									</li>
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">If more than three lines of text need to be shown in list tiles, use cards instead.</span> </div>
									</li>
								</ul>
								<!--Avatar with Three Line Text end -->
								<p class="component-desc">Avatar with Three-line List</p>
							</div>
							<div class="col-md-6"> 
								<!--Avatar with Three Line Text and Icon -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">In a three-line list, each tile contains a maximum of three lines of text.</span> </div>
										<i class="material-icons media-right">check_box</i> </li>
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">The amount of text can vary between tiles within the same list.</span> </div>
										<i class="material-icons media-right">check_box_outline_blank</i> </li>
									<li class="list-group-item">
										<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="../../components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
										<div class="media-body">
											<h3 class="list-group-item-heading">Three-line item</h3>
											<span class="list-group-item-text">If more than three lines of text need to be shown in list tiles, use cards instead.</span> </div>
										<i class="material-icons media-right">check_box_outline_blank</i> </li>
								</ul>
								<!--Avatar with Three Line Text and Icon  end-->
								
								<p class="component-desc">Avatar with Three-line List and Icon</p>
							</div>
						</div> <!-- three line list with media end -->
					</div>
				</div> <!-- Three Line List code and example end -->
			</section> <!-- Three Line List end --> 			
			
			<!-- Linked list -->
			<section class="row component-section">
				
				<!-- Linked list title and description --> 
				<div class="col-md-3">
					<div id="linked">
						<h2>Linked Items</h2>
					</div>
					<p>Make list group items clickable by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
				</div> <!-- Linked list title and description end -->
				
				<!-- Linked list code and example -->
				<div class="col-md-9"> 
					<div class="component-box">

						<!-- linked list example -->
						<div class="row">
							<div class="col-md-12"> 
								<div class="list-group pmd-z-depth pmd-list pmd-card-list"> <a class="list-group-item" href="javascript:void(0);">Single-line item</a> <a class="list-group-item" href="javascript:void(0);">Single-line item</a> <a class="list-group-item" href="javascript:void(0);">Single-line item</a> <a class="list-group-item" href="javascript:void(0);">Single-line item</a> <a class="list-group-item" href="javascript:void(0);">Single-line item</a> </div>
							</div>
						</div> <!-- linked list example end -->
						
					</div>
				</div> <!-- Linked list code and example end -->
			</section> <!-- Linked list end --> 			
			
			<!-- Disabled list -->
			<section class="row component-section">
				
				<!-- Disabled list title and description -->
				<div class="col-md-3">
					<div id="disable">
						<h2>Disabled List Items</h2>
					</div>
					<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
				</div> <!-- Disabled list title and description end -->
				
				<!-- Disabled list code and example -->
				<div class="col-md-9"> 
					<div class="component-box">
						<!-- disabled list example -->
						<div class="row">
							<div class="col-md-12">
								<div class="list-group pmd-z-depth pmd-list pmd-card-list"> <a class="list-group-item disabled" href="javascript:void(0);">Cras justo odio</a> <a class="list-group-item" href="javascript:void(0);">Dapibus ac facilisis in</a> <a class="list-group-item" href="javascript:void(0);">Morbi leo risus</a> <a class="list-group-item" href="javascript:void(0);">Porta ac consectetur ac</a> <a class="list-group-item" href="javascript:void(0);">Vestibulum at eros</a> </div>
							</div>
						</div> <!-- disabled list example end -->
						
					</div>
				</div> <!-- Disabled list code and example end -->
			</section> <!-- Disabled list end -->			 
			
			<!-- Group Item list -->
			<section class="row component-section">
				
				<!-- Group Item list title and description --> 
				<div class="col-md-3">
					<div id="group">
						<h2>Group Items</h2>
					</div>
					<p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
				</div> <!-- Group Item list title and description end -->
				
				<!-- Group Item list code and example -->
				<div class="col-md-9"> 
					<div class="component-box">
						<!-- group item list example -->
						<div class="row">
							<div class="col-md-6"> 
								<!--Group Items of diffrent types start -->
								<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
									<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
									<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
									<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
									<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
								</ul>
								<!--Group Items of diffrent types end -->
								<p class="component-desc">Group Items with diffrent types</p>
							</div>
							<div class="col-md-6"> 
								<!--Group Items with Linking start -->
								<div class="list-group pmd-z-depth pmd-list pmd-card-list"> 
									<a class="list-group-item list-group-item-success" href="javascript:void(0);">Dapibus ac facilisis in</a>
									<a class="list-group-item list-group-item-info" href="javascript:void(0);">Cras sit amet nibh libero</a>
									<a class="list-group-item list-group-item-warning" href="javascript:void(0);">Porta ac consectetur ac</a>
									<a class="list-group-item list-group-item-danger" href="javascript:void(0);">Vestibulum at eros</a>
								</div>
								<!--Group Items with Linking end -->
								<p class="component-desc">Group Items with Linking</p>
							</div>
						</div> <!-- group item list example end -->
						
					</div>
					<div class="component-box">
						<!-- grouped list example -->
						<div class="row">
							<div class="col-md-12"> 
								<!--List group items with heading and Linking start -->
								<div class="list-group pmd-z-depth pmd-list pmd-card-list"> <a href="javascript:void(0);" class="list-group-item ">
									<h3 class="list-group-item-heading">List group item heading</h3>
									<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
									</a> <a href="javascript:void(0);" class="list-group-item">
									<h3 class="list-group-item-heading">List group item heading</h3>
									<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
									</a> <a href="javascript:void(0);" class="list-group-item">
									<h3 class="list-group-item-heading">List group item heading</h3>
									<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
									</a> </div>
								<!--List group items with heading and Linking end -->
								<p class="component-desc">List group items with heading and Linking</p>
							</div>
						</div> <!-- grouped list example end -->
					</div>
				</div> <!-- Group Item list code and example end -->
			</section> <!-- Group Item list end --> 			
		</div>
	
	</div>	
	
</div> <!--Lists end -->
 
	
<!-- Footer Starts -->
<footer class="admin-footer">
 <div class="container-fluid">
 	<ul class="list-unstyled list-inline">
	 	<li>
			<span class="pmd-card-subtitle-text">Propeller &copy; 2016. All Rights Reserved.</span>
			<h3 class="pmd-card-subtitle-text">Licensed under <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license.</a></h3>
        </li>
        <li class="pull-right download-now">
			<a onClick="downloadPMDadmintemplate()" href="../../archive/pmd-admin-template-1.0.0.zip">
           		 <div>
                  <svg x="0px" y="0px" width="38px" height="32px" viewBox="0 0 38 32" enable-background="new 0 0 38 32" xml:space="preserve">
<g>
	<path fill="#A5A4A4" d="M13.906,26.652l4.045,4.043c0.001,0,0.002,0.002,0.003,0.004l1.047,1.047l1.047-1.049
		c0.001,0,0.001,0,0.001,0l4.044-4.045c0.579-0.58,0.579-1.518,0-2.098c-0.579-0.578-1.519-0.578-2.096,0l-1.514,1.514V16.22
		c0-0.818-0.664-1.482-1.483-1.482c-0.818,0-1.482,0.664-1.482,1.482v9.85l-1.515-1.516c-0.29-0.289-0.669-0.434-1.048-0.434
		c-0.38,0-0.759,0.145-1.049,0.434C13.327,25.133,13.327,26.072,13.906,26.652z"/>
	<g>
		<g>
			<path fill="#A5A4A4" d="M8.453,26.363c-0.032,0-0.065,0-0.099-0.002C3.67,26.053,0,22.137,0,17.443
				c0-4.434,3.242-8.124,7.48-8.825c0.3-4.663,4.188-8.364,8.926-8.364c2.249,0,4.393,0.844,6.032,2.346
				c4.602-1.86,9.527-0.766,12.266,2.831c1.808,2.375,2.399,5.513,1.671,8.719C37.416,15.412,38,17.008,38,18.65
				c0,3.902-3.176,7.076-7.077,7.076c-1.221,0-2.428-0.32-3.492-0.926c-0.712-0.404-0.961-1.311-0.556-2.021
				c0.404-0.713,1.312-0.963,2.021-0.557c0.619,0.352,1.319,0.539,2.027,0.539c2.267,0,4.111-1.844,4.111-4.111
				c0-1.146-0.467-2.212-1.312-3.001l-0.673-0.627l0.264-0.881c0.769-2.574,0.416-5.094-0.969-6.913
				c-2.061-2.706-5.997-3.332-9.577-1.522l-1.045,0.528L20.966,5.34c-1.139-1.347-2.802-2.12-4.56-2.12
				c-3.297,0-5.979,2.683-5.979,5.979c0,0.21,0.01,0.416,0.033,0.619l0.186,1.648l-1.784-0.004
				c-3.215,0.003-5.896,2.685-5.896,5.983c0,3.135,2.453,5.752,5.584,5.957c0.817,0.055,1.436,0.76,1.382,1.576
				C9.88,25.762,9.228,26.363,8.453,26.363z"/>
		</g>
	</g>
</g>
</svg>
           		 </div>
            	 <div>
              	 	<span class="pmd-card-subtitle-text">Version- 1.0.0</span>
              	 	<h3 class="pmd-card-title-text">Download Now</h3>
            	</div>
			</a>
        </li>
        <li class="pull-right for-support">
			<a href="mailto:support@propeller.in">
          		<div>
					<svg x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" enable-background="new 0 0 38 38">
<g><path fill="#A5A4A4" d="M25.621,21.085c-0.642-0.682-1.483-0.682-2.165,0c-0.521,0.521-1.003,1.002-1.524,1.523
		c-0.16,0.16-0.24,0.16-0.44,0.08c-0.321-0.2-0.683-0.32-1.003-0.521c-1.483-0.922-2.726-2.125-3.809-3.488
		c-0.521-0.681-1.002-1.402-1.363-2.205c-0.04-0.16-0.04-0.24,0.08-0.4c0.521-0.481,1.002-1.003,1.524-1.483
		c0.721-0.722,0.721-1.524,0-2.246c-0.441-0.44-0.842-0.842-1.203-1.202c-0.441-0.441-0.842-0.842-1.243-1.243
		c-0.642-0.642-1.483-0.642-2.165,0c-0.521,0.521-1.002,1.002-1.524,1.523c-0.481,0.481-0.722,1.043-0.802,1.685
		c-0.08,1.042,0.16,2.085,0.521,3.047c0.762,2.085,1.925,3.849,3.328,5.532c1.884,2.286,4.17,4.05,6.815,5.333
		c1.203,0.562,2.406,1.002,3.729,1.123c0.922,0.04,1.724-0.201,2.365-0.923c0.441-0.521,0.923-0.922,1.403-1.403
		c0.682-0.722,0.682-1.563,0-2.245C27.265,22.729,26.423,21.927,25.621,21.085z"/>
	<path fill="#A5A4A4" d="M32.437,5.568C28.869,2,24.098-0.005,19.005-0.005S9.182,2,5.573,5.568C2.005,9.177,0,13.908,0,19
		s1.965,9.823,5.573,13.432c3.568,3.568,8.34,5.573,13.432,5.573s9.823-1.965,13.431-5.573
		C39.854,25.014,39.854,12.985,32.437,5.568z M30.299,30.294c-3.003,3.045-7.021,4.695-11.293,4.695
		c-4.272,0-8.291-1.65-11.294-4.695C4.666,27.29,3.016,23.271,3.016,19c0-4.272,1.649-8.291,4.695-11.294
		c3.003-3.003,7.022-4.695,11.294-4.695c4.272,0,8.291,1.649,11.293,4.695C36.56,13.924,36.56,24.075,30.299,30.294z"/>
</g></svg>
            	</div>
            	<div>
				  <span class="pmd-card-subtitle-text">For Support</span>
				  <h3 class="pmd-card-title-text">support@propeller.in</h3>
				</div>
            </a>
        </li>
    </ul>
 </div>
</footer>
<!-- Footer Ends -->

<!-- Scripts Starts -->
<script src="../../assets/js/jquery-1.12.2.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/propeller.min.js"></script>
<script>
	$(document).ready(function() {
		var sPath=window.location.pathname;
		var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
		$(".pmd-sidebar-nav").each(function(){
			$(this).find("a[href='"+sPage+"']").parents(".dropdown").addClass("open");
			$(this).find("a[href='"+sPage+"']").parents(".dropdown").find('.dropdown-menu').css("display", "block");
			$(this).find("a[href='"+sPage+"']").parents(".dropdown").find('a.dropdown-toggle').addClass("active");
			$(this).find("a[href='"+sPage+"']").addClass("active");
		});
	});
</script> 

<!-- Scripts Ends -->

</body>
</html>